import { GatewayType } from "@/api/interface/iot";
import { CommonText, SchemaNodeKey } from "@/utils/constants";
import { ElTooltip } from "element-plus";
import MiniToggle from "../components/MiniToggle";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import "../model.scss";
/**
 * 详情分类导航，根据Scheme描述分类信息
 */
//根据Schema绘制分类导航
export default defineComponent({
	props: {
		deviceType: {
			type: String,
			default: GatewayType.Device
		}
	},
	emits: ["change"],
	setup(props, { emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const schema = inject<any>(SchemaNodeKey.gatewaySchema);
		// const profile = inject<any>(SchemaNodeKey.profile);
		const active = ref("");
		const change = (type: string) => {
			active.value = type;
			emit("change", active.value);
		};
		onMounted(() => {
			// if (props.deviceType == GatewayType.Device) {
			// 	change(SchemaNodeKey.config);
			// } else {
			// 	change(SchemaNodeKey.extNavGatewayConfig);
			// }
			change(SchemaNodeKey.sensor);
		});
		return () => {
			return (
				<>
					<div class="block-nav flex pl-6 pr-6 h-12 text-base">
						{/* <div
							onClick={() => change(SchemaNodeKey.basic)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.basic ? "active" : ""}`}
						>
							基础属性
						</div> */}
						<div
							onClick={() => change(SchemaNodeKey.sensor)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.sensor ? "active" : ""}`}
						>
							{proxy?.$t("navigation.label.model")}
						</div>
						{props.deviceType == GatewayType.Device ? (
							<>
								<NavItem
									navKey={SchemaNodeKey.config}
									onChange={val => change(val)}
									active={active.value == SchemaNodeKey.config}
									schema={schema.value.properties && schema.value.properties}
								/>
								<NavItem
									navKey={SchemaNodeKey.funcs}
									onChange={val => change(val)}
									active={active.value == SchemaNodeKey.funcs}
									schema={schema.value.properties && schema.value.properties}
								/>
								<div
									onClick={() => change(SchemaNodeKey.extDevelop)}
									class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extDevelop ? "active" : ""}`}
								>
									{CommonText.debugPreviewSchemaProduct}
								</div>
							</>
						) : (
							<>
								<div
									onClick={() => change(SchemaNodeKey.extNavGatewayConfig)}
									class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavGatewayConfig ? "active" : ""}`}
								>
									{proxy?.$t("navigation.label.gatewayconfig")}
								</div>
								<div
									onClick={() => change(SchemaNodeKey.extLower)}
									class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extLower ? "active" : ""}`}
								>
									{proxy?.$t("navigation.label.extlower")}
								</div>
								{/* <div
							onClick={() => change(SchemaNodeKey.extNavDeviceConfig)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavDeviceConfig ? "active" : ""}`}
						>
							下位机配置
						</div>
						<div
							onClick={() => change(SchemaNodeKey.extNavSensorConfig)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavSensorConfig ? "active" : ""}`}
						>
							下位机变量
						</div> */}
								<div
									onClick={() => change(SchemaNodeKey.extDevelop)}
									class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extDevelop ? "active" : ""}`}
								>
									{CommonText.debugPreviewSchemaProduct}
								</div>
							</>
						)}{" "}
						<div
							onClick={() => change(SchemaNodeKey.view)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.view ? "active" : ""}`}
						>
							{proxy?.$t("navigation.label.visualization")}
						</div>
						<MiniToggle />
					</div>
				</>
			);
		};
	}
});

const NavItem = defineComponent({
	props: {
		active: {
			type: Boolean,
			default: false
		},
		navKey: {
			type: String,
			default: ""
		},
		schema: {
			type: Object,
			default: () => {}
		}
	},
	emits: ["change"],
	setup(props, { emit }) {
		return () => {
			return (
				<div
					class={`pl-6 pr-6 item ${props.active ? "active" : ""}`}
					onClick={() => {
						emit("change", props.navKey);
					}}
				>
					{props.schema && props.schema[props.navKey]?.title}
					{props.schema && props.schema[props.navKey]?.description ? (
						<ElTooltip
							raw-content
							v-slots={{
								content: () => {
									return <div class="text-sm" v-html={props.schema[props.navKey].description}></div>;
								}
							}}
						>
							<i class="iconfont iconhelp-circle pl-2 "></i>
						</ElTooltip>
					) : (
						""
					)}
				</div>
			);
		};
	}
});
